{% load i18n %}

{% if not is_popup %}
    {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
        <div class="flex items-start flex-col mb-4 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end">
            {% if inlines_list or tabs_list %}
                <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
                    {% for item in tabs_list %}
                        {% if item.has_permission %}
                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                                <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="block px-3 py-2 md:py-4 md:px-0 dark:border-gray-800 {% if item.active %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:!border-primary-600{% else %}font-medium hover:text-gray-700 dark:hover:text-gray-200{% endif %}">
                                    {{ item.title }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if inlines_list %}
                        <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                            <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
                               href="#general"
                               x-on:click="activeTab = 'general'"
                               x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != 'general'}">
                                {% trans "General" %}
                            </a>
                        </li>

                        {% for inline in inlines_list %}
                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
                                <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
                                   href="#{{ inline.opts.verbose_name|slugify }}"
                                   x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'"
                                   x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-gray-700 dark:hover:text-gray-200 dark:border-gray-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
                                    {% if inline.formset.max_num == 1 %}
                                        {{ inline.opts.verbose_name|capfirst }}
                                    {% else %}
                                        {{ inline.opts.verbose_name_plural|capfirst }}
                                    {% endif %}
                                </a>
                            </li>
                        {% endfor %}
                    {% endif %}
                </ul>
            {% endif %}

            {% if actions_list or actions_detail or actions_items or nav_global %}
                <ul class="border flex flex-col font-medium mb-4 mt-2 rounded-md shadow-sm md:flex-row md:mb-2 md:mt-0 dark:border-gray-800 max-md:w-full">
                    {% for action in actions_list %}
                        {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
                    {% endfor %}

                    {% for action in actions_detail %}
                        {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
                    {% endfor %}

                    {% if actions_items %}
                        {{ actions_items }}
                    {% endif %}

                    {% if nav_global %}
                        {{ nav_global }}
                    {% endif %}
                </ul>
            {% endif %}
        </div>
    {% endif %}

{% endif %}
